<template>
  <div class="app-container">
    <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
      label-width="140px">
      <h2 style="text-align: center">实验室人员考核评价记录</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="部门" prop="deptId">
            <el-cascader :props="{ value: 'id', checkStrictly: true }" :show-all-levels="false" ref="reference"
              placeholder="请选择部门" :style="{ width: '100%' }" v-model="formData.deptId"
              :options="deptOptions"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考核日期" prop="checkDate">
            <el-date-picker v-model="formData.checkDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="考核方式" prop="checkType">
            <el-select v-model="formData.checkType" filterable :style="{ width: '100%' }" placeholder="请选择考核方式">
              <el-option v-for="dict in dict.type.sys_check_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="formData.checkType == 4">
          <el-form-item label="其他考核方式" prop="otherType">
            <el-input v-model="formData.otherType" placeholder="请输入其他考核方式"></el-input>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="考核人" prop="checkUserId">
            <UserDialog placeholder="请输入考核人" @change="changecheckeUser" v-model="formData.checkUserId"></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="被考核人" prop="checkedUserId">
            <UserDialog placeholder="请输入被考核人" @change="changecheckedUser" v-model="formData.checkedUserId"></UserDialog>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="考核内容" prop="content">
            <el-input v-model="formData.content" placeholder="请输入考核内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">考核过程</h4>
      <el-table :data="formData.contentList" :border="true" style="width: 100%" :span-method="objectSpanMethod">
        <el-table-column label="" type="type" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? '规范' : scope.row.type == 2 ? '设备' : scope.row.type == 3 ? '试验过程' : '数据处理' }}
          <!-- <el-button type="primary" @click="reselection(scope.row.type)" size="mini">重选</el-button> -->

          </template>
        </el-table-column>
        <el-table-column label="内容" align="center">
          <template slot-scope="scope">
            <!-- <el-checkbox v-if="scope.row.type == 1" v-model="scope.row.checkbox" :disabled="boxShow"
              @change="checkboxChage(scope.row.checkbox, 1)"> </el-checkbox>
            <el-checkbox v-if="scope.row.type == 2" v-model="scope.row.checkbox" :disabled="boxShow1"
              @change="checkboxChage(scope.row.checkbox, 2)"> </el-checkbox>
            <el-checkbox v-if="scope.row.type == 3" v-model="scope.row.checkbox" :disabled="boxShow2"
              @change="checkboxChage(scope.row.checkbox, 3)"> </el-checkbox>
            <el-checkbox v-if="scope.row.type == 4" v-model="scope.row.checkbox" :disabled="boxShow3"
              @change="checkboxChage(scope.row.checkbox, 4)"></el-checkbox> -->
              {{ scope.row.content }}

          </template>
        </el-table-column>

        <el-table-column width="250" label="分数" align="center">
          <template slot-scope="scope">
            <!-- {{ `contentList.${scope.$index}.point` }} -->
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.point`" :rules="rules.point">
              <!-- {{ scope.row.disabled}} -->
              <el-input v-model="scope.row.point" placeholder="请输入分数" :disabled="scope.row.disabled"
                @blur="inputChange(scope.row.point, scope.row.type,scope.$index)"  @input="changeblur(scope.row.point, scope.row.type)" style="margin-bottom: 20px;"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
     

      <h4 class="form-header h4" style="margin-top: 20px">附件信息</h4>
      <el-form-item label="" prop="oss">
        <FileUploadBase :isDelete="!$route.query.isInfo" v-model="formData.oss"></FileUploadBase>
      </el-form-item>
      <h4 class="form-header h4" style="margin-top: 20px">考核结果</h4>
      <div style="width: 30%;">
        <el-form-item label="最终得分(平均值)" prop="averagePoint">
          <el-input v-model="formData.averagePoint" :disabled="true" placeholder="请输入最终得分(平均值)"></el-input>
        </el-form-item>
        <el-form-item label="考核结果评价" prop="result">
          <el-select v-model="formData.result" :disabled="true" filterable :style="{ width: '100%' }" placeholder="请选择考核结果评价">
            <el-option v-for="dict in dict.type.sys_check_result" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </div>
      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  checkAppraiseRecordAdd,
  updategcheckAppraiseRecord,
  checkAppraiseRecordInfo,
} from "@/api/cultivate/checkRecord.js";
import { deptTreeSelect } from "@/api/system/user.js";
import { listSelect } from "@/api/cultivate/content.js";

export default {
  components: {},
  dicts: ["sys_check_type", "sys_check_result"],
  props: [],
  data() {
    return {
      formData: {
        checkType: undefined,
        sort: undefined,
        content: undefined,
        deptId: undefined,
        otherType: undefined,
        averagePoint: undefined,
        checkedUserId: undefined,
        checkUserId: undefined,
        checkDate: undefined,
        result: undefined,
        oss: undefined,
        contentList: [
          { sort: undefined, content: undefined, point: undefined },
        ],
      },

      rules: {
        oss: [
          {
            required: false,
            message: "附件不能为空",
            trigger: ["change"],
          },
        ],
        averagePoint: [
          {
            required: false,
            message: "请输入最终得分(平均值)",
            trigger: ["blur"],
          },
        ],
        checkUserId: [
          {
            required: true,
            message: "请选择考核人",
            trigger: ["change"],
          },
        ],
        checkedUserId: [
          {
            required: true,
            message: "请选择被考核人",
            trigger: ["change"],
          },
        ],
        checkDate: [
          {
            required: true,
            message: "请选择日期",
            trigger: ["change"],
          },
        ],
        result: [
          {
            required: false,
            message: "请选择考核结果评价",
            trigger: ["change"],
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: ["change"],
          },
        ],
        otherType: [
          {
            required: true,
            message: "请输入其他考核方式",
            trigger: ["blur"],
          },
        ],

        sort: [
          {
            required: true,
            message: "请输入排序",
            trigger: ["blur"],
          },
        ],
        checkType: [
          {
            required: true,
            message: "请选择考核方式",
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入考核内容",
            trigger: "blur",
          },
        ],
        point: [
          {
            required: false,
            message: "请输入分数",
            trigger: "blur",
          },
        ],
      },
      deptOptions: [],
      listSelectList: [],
      boxShow: false,
      boxShow1: false,
      boxShow2: false,
      boxShow3: false,
      arr: [],
      types:[]
    };
  },
  computed: {},
  created() {
    this.getDeptTree();
    this.listSelect();
  },
  mounted() { },
  methods: {
    // checkboxChage(e, i) {
    //   console.log(e, i);
    //   // this.listSelectList.forEach(item => {
    //   //   if (item.type != i) {
    //   //     console.log('.////////////');
    //   //     item.disabled = true
    //   //     item.checkbox = false
    //   //   } else {
    //   //     item.checkbox = true
    //   //   }
    //   // })
    //   switch (i) {
    //     case 1:
    //       this.boxShow = e
    //       break;
    //     case 2:
    //       this.boxShow1 = e
    //       break;
    //     case 3:
    //       this.boxShow2 = e
    //       break;
    //     case 4:
    //       this.boxShow3 = e
    //       break;
    //   }
    //   // let arr = []
    //   this.formData.contentList.forEach((item, index) => {
    //     if (item.type == i) {
    //       if (item.checkbox) {
    //         console.log(item, '______');
    //         let obj = item
    //         console.log(obj);
    //         this.arr.push(obj)
    //       }
    //     }
    //   })
    //   console.log(this.arr);
    // },
    inputChange(e, i,v) {
      console.log(e, i,v);
      // 只要不是当前索引全部disadled
      // this.formData.contentList.forEach((item,index)=>{
      //   if(item.type == i && v!=index){
      //     console.log(item.content);
      //       console.log('index');
      //       this.$nextTick(()=>{
      //         this.$set(item, "disabled", true);
      //       })
      //       this.$forceUpdate()
      //   }
      // })
      // console.log(this.formData.contentList);
      if (this.arr.length > 0) {
        this.arr.forEach(item => {
          if (i == item.type) {
            item.point = Number(e)
          }
        })
      }
    },
    changeblur(e,i){
      console.log(e,i);
      let obj ={}
        obj.value = e
        obj.label = i
      this.types.push(obj)
      // this.types.forEach((item,index)=>{
      //   if(i == item.label){
      //     console.log('././.');
      //     this.types.splice(index,1)
      //   }else{
      //     console.log('=====');
      //     this.types.push(obj)
      //   }
      // })
    console.log(this.types);     
    },
    reselection(e) {
      console.log(e);
      switch (e) {
        case '1':
          console.log('+++++');
          this.boxShow = false
          break;
        case '2':
          this.boxShow1 = false
          break;
        case '3':
          this.boxShow2 = false
          break;
        case '4':
          this.boxShow3 = false
          break;
      }
      this.listSelectList.forEach(item => {
        item.checkbox = false
      })
      this.arr.forEach((item, index) => {
        if (item.type == e) {
          this.arr.splice(index, 1)
        }
      })
    },
    listSelect() {
      listSelect().then((response) => {
        this.listSelectList = response.data;
        this.listSelectList.forEach(item => {
          item.checkbox = false
          item.disabled = false
        })
        if (this.$route.query.isEdit || this.$route.query.isInfo) {
          this.getinfo();
        } else {
          this.formData.contentList = this.listSelectList;
        }

      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;

      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row);
      // 判断列的属性
      // let num = 0
      // if (row.type == '1') {
      //   num=num+1
      //   console.log(num , '+++++++++++++')
      // }
      // this.formData.contentList.forEach((item,index)=>{
      //   if(item.type == row.type){

      //   }
      // })
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // if (columnIndex === 2) {
      //   if (rowIndex % 4 === 0) {
      //     return {
      //       rowspan: 4,
      //       colspan: 1
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     };
      //   }
      // }
    },
    changecheckeUser(e) {
      this.formData.checkUserName = e.nickName;
    },
    changecheckedUser(e) {
      this.formData.checkedUserName = e.nickName;
    },
    getinfo() {
      checkAppraiseRecordInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
      });
    },
    submitForm() {
      console.log(this.formData.contentList);
      console.log(this.arr);
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          // let num = 0
          // this.arr.forEach(item => {
          //   console.log(num);
          //   if (!item.point) {
          //     item.point = 0
          //   }
          //   num += item.point
          //   console.log(num);
          // })
          let typeOne= 0
          let typeTwo= 0
          let typeThree= 0
          let typeFour= 0
          this.formData.contentList.forEach((item,index)=>{
            if(item.type == '1'){
              typeOne= item.point ? typeOne+1:typeOne
            }
            if(item.type == '2'){
              typeTwo= item.point ? typeTwo+1:typeTwo
            }
            if(item.type == '3'){
              typeThree= item.point ? typeThree+1:typeThree
            }
            if(item.type == '4'){
              typeFour= item.point ? typeFour+1:typeFour
            }
          })
          if(typeOne > 1){
            this.$message.error('规范内容分数只可以填一个！')
            return
          }
          if(typeTwo > 1){
            this.$message.error('设备内容分数只可以填一个！')
            return
          }
          if(typeThree > 1){
            this.$message.error('试验过程内容分数只可以填一个！')
            return
          }
          if(typeFour > 1){
            this.$message.error('数据处理内容分数只可以填一个！')
            return
          }
          this.formData.averagePoint = 0
          console.log(this.formData.averagePoint);
          let query = JSON.parse(JSON.stringify(this.formData));
          query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
          query.deptName = this.$refs.reference.getCheckedNodes()[0].label;
          console.log(query,);
          if (this.formData.checkAppraiseRecordId != undefined) {
            updategcheckAppraiseRecord(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            checkAppraiseRecordAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./checkRecord" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
